<template>
    <div id="app">
        <router-view></router-view>
        <!-- <transition :name="transitionName">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </transition> -->
    </div>
</template>

<script>

const TransitionLeft = "slide-left";
const TransitionRight = "slide-right";

export default {

    name: "app",

    data() {
        return {
            transitionName: ''// 默认无动画
        };
    },

    created() {
        // this.initData();
    },

    mounted() {

    },

    methods: {

    },

    watch: {
        // '$route'(to, from) {
        //     if (!from.name) {
        //         this.transitionName = ""
        //         return
        //     }
        //     if (to.meta.index == from.meta.index) {
        //         this.transitionName = ""
        //         return
        //     }
        //     this.transitionName = ""
        //     // this.transitionName = to.meta.index < from.meta.index ? TransitionRight : TransitionLeft
        // }
    },
};
</script>

<style lang="scss">
html,
body,
#app {
    width: 100%;
    min-height: 100vh;
    font-size: 18px;
}

#app {
    max-width: 375px;
    margin: auto;
    background-color: #f3f3f3;
}

.page {
    width: 100%;
    min-height: 100vh;
}
</style>

<style lang="scss" scoped>
/* 页面跳转动画 */
.slide-left-enter-active,
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-leave-active {
    will-change: transform;
    transition: all 150ms;
    position: absolute;
}

.slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}

.slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}

.slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}

.slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
</style>
